import { store } from "@/store";
import { Card } from "antd";
import { useEffect, useState } from "react";
import { useLocation, useSearchParams } from "react-router-dom";
import Info from "./Info";
import Debug from "./Debug";
import Code from "./Code";

export default function ApiView() {
  const location = useLocation();
  const [apiObj, setApiObj] = useState<any>({});
  const [searchParams, setSearchParams] = useSearchParams();
  const [activeItem, setActiveItem] = useState("");
  useEffect(() => {
    const newApiObj = store.apiList[location.pathname];
    if (!searchParams.get("mode")) {
      setSearchParams({ mode: "info" });
    }
    if (newApiObj) {
      setApiObj(newApiObj);
    }
    setActiveItem(searchParams.get("mode") || "");
  }, [location, store.apiList]);
  useEffect(() => {
    store.apiObj = { url: location.pathname, ...apiObj };
  }, [apiObj]);

  const cardItem = [
    {
      label: `信息`,
      key: "info",
      com: <Info />,
    },
    {
      label: `调试`,
      key: "debug",
      com: <Debug />,
    },
    {
      label: `生成代码`,
      key: "code",
      com: <Code />,
    },
  ];
  const cardItemCom: any = {};
  cardItem.forEach((item) => {
    cardItemCom[item.key] = item.com;
  });
  return (
    <div>
      <div className="mb-1 ml-1m flex flex-y-c">
        {apiObj["methods"]?.toLowerCase() == "get" && (
          <span style={{ color: "#17b26a", fontWeight: 700 }} className="mr-1m">
            GET
          </span>
        )}
        {apiObj["methods"]?.toLowerCase() == "post" && (
          <span style={{ color: "#ef6820", fontWeight: 700 }} className="mr-1m">
            POST
          </span>
        )}
        {(apiObj["methods"]?.toLowerCase() == "all" || !apiObj["methods"]) && (
          <span style={{ color: "#2e90fa", fontWeight: 700 }} className="mr-1m">
            ALL
          </span>
        )}

        <span className="font-24px ml-1m translatey--2">
          {apiObj.name || "未知接口"}
        </span>
      </div>
      <Card
        tabList={cardItem}
        activeTabKey={activeItem}
        onTabChange={(e) => {
          if (e) {
            setSearchParams({ mode: e });
          }
        }}
      >
        {cardItemCom[activeItem]}
      </Card>
    </div>
  );
}
